<template>
    <div class="passwordReset-container">
    <BaseHeader></BaseHeader>
        <div class="main">
            <div class="title">{{$t('passwordReset.title')}}</div>
            <el-row :gutter="24">
                <el-col :span="20">
                    <el-form ref="pwdForm" :model="pwdForm" :rules="rules" label-width="230px">
                        <el-form-item :label="$t('user.updatePassword.newPwd')" prop="newPwd">
                            <el-input v-model="pwdForm.newPwd" show-password auto-complete="new-accounts"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('user.updatePassword.conPwd')" prop="confirmPwd">
                            <el-input v-model="pwdForm.confirmPwd" show-password auto-complete="new-accounts"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitPwdForm('pwdForm')">{{$t('sure')}}</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import BaseHeader from '../../components/baseHeader'
export default {
    components: {
        BaseHeader
    },
    data(){
        var validate_newPwd = (rule, value, callback) => {
            var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
		    var regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
            if (regEn.test(value)||regCn.test(value)) {
                callback(new Error(this.$t('user.msg_illegal_character')));
            } else if (value==this.pwdForm.password){
                callback(new Error(this.$t('user.msg_old_equal_newPwd')));
            }else{
                callback()
            }
        };
        var validate_confirmPwd = (rule, value, callback) => {
            if (value!=this.pwdForm.newPwd) {
                callback(new Error(this.$t('user.msg_different_twice')));
            }else{
                callback()
            }
        };
        return{
            pwdForm:{
                newPwd:'',
                confirmPwd:''
            },
            rules:{
                newPwd:[
                    { required: true, message: this.$t('user.msg_newPwd'), trigger: 'blur' },
                    { min: 2, max: 20, message: this.$t('index_js_lengthRules'), trigger: 'blur' },
                    { validator: validate_newPwd, trigger: 'blur' }
                ],
                confirmPwd:[
                    { required: true, message: this.$t('common.info.pl-insert-sure-pwd'), trigger: 'blur' },
                    { validator: validate_confirmPwd, trigger: 'blur' }
                ]
            }
        }
    },
    mounted(){

    },
    methods:{
        //修改密码
        async submitPwdForm(formName){
            console.log(this.$route.query.userId)
            this.$refs[formName].validate(async(valid)=>{
                if(valid){
                    let res = await this.API.loginResetPwd({
                        userId:this.$route.query.userId,
                        newPwd:this.pwdForm.newPwd,
                        reNewPwd:this.pwdForm.confirmPwd,
                    })
                    if(res.success){
                        this.$message.success(this.$t('index.alter_success'))
                        this.pwdFormVisible=false
                        this.userData.password=md5(this.pwdForm.confirmPwd);//更新用户信息
                        this.updateUserInfo();
                    }else{
                        this.$message.warning(this.$t('index.alter_fail'))
                    }
                }
            })
        }
    }
}
</script>
<style  lang="less">
.passwordReset-container{
    .main{
        width: 600px;
        margin: 20px auto;
        padding: 20px;
        border: 1px solid #d8d8d8;
        background: #f7f7f7;
        border-radius: 5px;
    }
    .title{
        margin-bottom:20px;
        height:30px;
        line-height: 30px;
        font-weight: bold;
    }
    .dialog-footer{
        text-align: right;
    }
}
</style>
